import React, { Suspense } from 'react'
import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom'
import routes from './routerConfig'
const routerView = () => {
  const render=(arr)=>{
    return arr.map((item,index)=>{
      return <Route
      key={index}
      path={item.path}
      element={item.to?<Navigate to={item.to}/>:<item.element/>}
      >
      {
        item.children&&render(item.children)
      }
      </Route>
    })
  }
  return (
    <Suspense fallback={<div>...loading</div>}>
      <BrowserRouter>
        <Routes>
          {
            render(routes)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default routerView